<template>
  <img
    v-show="ImageUrl"
    :class="{ 'base-map': propValue.isDrag }"
    :style="{ 'min-width': imgWidth + 'px' }"
    width="imgWidth"
    height="imgHeight"
    :src="ImageUrl"
    alt=""
  />
</template>

<script setup lang="ts">
import { inject, onMounted, ref, watch } from "vue";
import { debounce } from "@pureadmin/utils";
import { downloadPic } from "@visual/api/api";
import { ensurePngSuffix } from "@visual/utils";
import * as placeholderUrl from "@visual/assets/placeholder.jpg";

const props = defineProps(["propValue", "element"]);
const emits = defineEmits(["generalEvent", "editorEvent"]);

const positionCode = inject("positionCode", ref(""));
const comImageList = inject("comImageList", ref({}));

const ImageUrl = ref();
const imgHeight = ref();
const imgWidth = ref();
watch(
  () => props.element.style.width,
  val => (imgWidth.value = val)
);
watch(
  () => props.element.style.height,
  val => (imgHeight.value = val)
);

watch(() => props.propValue.url, debounce(urlDrawImageAgain, 500));
watch(() => props.propValue.name, debounce(nameDrawImageAgain, 500));

function drawImage({ placeholder = null, url = null }) {
  const { width, height } = props.element.style;
  imgWidth.value = width;
  imgHeight.value = height;

  if (!url) ImageUrl.value = placeholder || !props.propValue.url ? placeholderUrl.default : props.propValue.url;
  else ImageUrl.value = url;
}
function urlDrawImageAgain({ url = null }) {
  drawImage({ url });
}
async function getImageByName() {
  if (!props.propValue.name) return;
  let res = {};
  if (comImageList.value[ensurePngSuffix(props.propValue.name)]) {
    res = comImageList.value[ensurePngSuffix(props.propValue.name)];
    if (res && res.fileUrl) res = [res];
  } else {
    res = await downloadPic({ originalName: props.propValue.name, moduleName: "twins_visualization" });
  }
  if (res && res[0]) {
    const { fileUrl } = res[0];
    urlDrawImageAgain({ url: fileUrl });
  } else {
    setDefault();
  }
}
async function nameDrawImageAgain() {
  if (!props.propValue.name) return;
  let res = {};
  if (comImageList.value[ensurePngSuffix(props.propValue.name)]) {
    res = comImageList.value[ensurePngSuffix(props.propValue.name)];
  } else {
    res = await downloadPic({ originalName: props.propValue.name, moduleName: "twins_visualization" });
  }
  if (res && res[0]) {
    const { fileUrl } = res[0];
    let width = props.element.style.width;
    let height = props.element.style.height;

    let poscode = positionCode.value;
    if (poscode && !(width || height)) {
      if (poscode.indexOf("FAC") !== -1) {
        width = 1600;
        height = 1600;
      } else if (poscode.indexOf("BUILD") !== -1) {
        width = 860;
        height = 860;
      } else if (poscode.indexOf("FLOOR") !== -1 || poscode.indexOf("AREA") !== -1) {
        width = 1300;
        height = 1300;
      } else if (poscode.indexOf("ROOM") !== -1) {
        width = 1300;
        height = 1300;
      } else {
        width = 860;
        height = 860;
      }
    }
    emitEditorEvent({ cKey: "url", cVal: fileUrl });
    emitEditorEvent({ oKey: "style", cVal: { width, height } });

    urlDrawImageAgain({ url: fileUrl });
  } else {
    setDefault();
  }
  console.log(res);
}
function setDefault() {
  drawImage({ placeholder: "placeholder" });
  emitEditorEvent({ cKey: "url", cVal: placeholderUrl });
}
function emitEditorEvent({ oKey = "propValue", cKey = null, cVal }) {
  emits("editorEvent", { oKey, cKey, cVal, id: props.element.id });
}

onMounted(() => {
  getImageByName();
});
</script>
<style lang="scss" scoped>
.base-map {
  transform-origin: 0 0;
}
</style>
